import Axios from "axios";
import { useEffect, useState } from "react";
import { Pagination } from "antd";

const Request = async ($url, $params) => {
  return await Axios.get($url, $params);
};
const View = () => {
  const [pages, setPages] = useState(10);
  const [list, setList] = useState([]);
  const [size, setSize] = useState(1);
  const [length, setLength] = useState();
  const onShowSizeChange = (current) => {
    setPages(current);
  };
  useEffect(() => {
    Request("/home/mediareports", {
      params: { page_number: size, page_size: pages },
    }).then((res) => {
      let _data = [...res.data.data];
      setLength(res.data.total);

      setList([..._data]);

      sessionStorage.setItem(`页码${size}`, JSON.stringify(res.data.data));
    });
  }, []);
  useEffect(() => {
    let num = sessionStorage.getItem(`页码${size}`);
    if (num) {
      setList(JSON.parse(num));
    } else {
      Request("/home/mediareports", {
        params: { page_number: size, page_size: pages },
      }).then((res) => {
        let _data = [...res.data.data];
        setLength(res.data.total);

        setList([..._data]);
      });
      sessionStorage.setItem(`页码${size}`, JSON.stringify(list));
    }
  }, [size, pages]);
  const onChange = (page, e) => {
    onShowSizeChange(e);
    setSize(page);
  };

  return (
    <>
      <ul>
        {list.map((item, index) => {
          return (
            <li key={index + item}>
              <p>{item.main_title}</p>
            </li>
          );
        })}
      </ul>
      <Pagination
        showQuickJumper
        defaultCurrent={1}
        current={size}
        onChange={onChange}
        total={length}
        hideOnSinglePage="true"
        showQuickJumper="true"
      />
    </>
  );
};
export default View;
